<!-- 查看学生信息请假详情 -->
<template>
  <el-dialog v-model="dialogVisible" :title="title" width="50%" @close="closeDialog">
    <el-form :model="studentLeaveModel" label-width="100px" style="padding-right: 30px">
      <el-form-item label="姓名：">
        <el-input v-model="studentLeaveModel.name" :disabled="disable"></el-input>
      </el-form-item>
      <el-form-item label="请假原因:" prop="reason">
        <el-input v-model="studentLeaveModel.reason" :disabled="disable"></el-input>
      </el-form-item>
      <el-form-item label="审核状态:" prop="status">
        <template #default="{ row }">
          <el-tag v-if="studentLeaveModel.status == 0" type="warning">未审核</el-tag>
          <el-tag v-if="studentLeaveModel.status == 1" type="success">已审核</el-tag>
        </template>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model="studentLeaveModel.phone" :disabled="disable"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer" v-show="studentLeaveModel.status == 0">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="agreeYes()">同意</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { getLeaveDetail, updateLeaveStatus } from "@/api/requestLeave/index";
import message from "@/composable/ElMessage";

const dialogVisible = ref(false);
const title = ref("");
const disable = ref(true);

const studentLeaveModel = reactive({
  id: 0,
  name: "",
  reason: "",
  status: 0,
  phone: "",
});

const open = (row: any) => {
  dialogVisible.value = true;
  getStudentList(row.id);
};

// 获取详情
const getStudentList = (id: number) => {
  getLeaveDetail(id).then((res: any) => {
    if (res.code == 200) {
      Object.assign(studentLeaveModel, res.data);
    }
  });
};

// 同意
const emit = defineEmits(["getInfo"]);
const agreeYes = () => {
  const data = {
    id: studentLeaveModel.id,
    status: 1,
  };
  updateLeaveStatus(data).then((res: any) => {
    if (res.code == 200) {
      message.success("已同意");
      emit("getInfo");
      closeDialog();
    }
  });
};

const closeDialog = () => {
  dialogVisible.value = false;
  Object.assign(studentLeaveModel, {
    id: 0,
    name: "",
    reason: "",
    status: 0,
    phone: "",
  });
};
defineExpose({ open, close });
</script>
